import React, { useState } from 'react';
import { Space, Card, Typography, InputNumber, Button, Row, Col } from 'antd';
import { Slider } from '../index';
import type { SliderSingleProps } from 'antd';

const { Title } = Typography;

const App: React.FC = () => {
  // 1. 基本滑块 - 带 tooltip
  const [value1, setValue1] = useState(23);

  // 2. 范围滑块（双滑块）
  const [value2, setValue2] = useState<[number, number]>([20, 50]);

  // 3. 带圆点标记的滑块
  const [value3, setValue3] = useState(0);

  // 4. 带标签的滑块
  const marks: SliderSingleProps['marks'] = {
    0: '试区1',
    33: '试区2',
    66: '试区3',
    100: '试区4',
  };
  const [value4, setValue4] = useState(33);

  // 5. 带输入框和按钮的滑块
  const [value5, setValue5] = useState(0);

  const handleSliderChange1 = (newValue: number | number[]) => {
    setValue1(newValue as number);
  };

  const handleSliderChange3 = (newValue: number | number[]) => {
    setValue3(newValue as number);
  };

  const handleSliderChange4 = (newValue: number | number[]) => {
    setValue4(newValue as number);
  };

  const handleSliderChange5 = (newValue: number | number[]) => {
    setValue5(newValue as number);
  };

  const handleInputChange = (newValue: number | null) => {
    if (newValue !== null) {
      setValue5(newValue);
    }
  };

  const handleForceInput = () => {
    console.log('强制入:', value5);
  };

  const handleUnit = () => {
    console.log('个单位:', value5);
  };

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* 1. 基本滑块 - 带 tooltip */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          滑动输入条
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          基本滑块，拖动时显示当前值
        </div>
        <Slider
          value={value1}
          onChange={handleSliderChange1}
          tooltip={{ open: true }}
          style={{ width: '100%' }}
        />
      </Card>

      {/* 2. 范围滑块（双滑块） */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          范围选择
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          双滑块模式，可以选择一个范围
        </div>
        <Slider
          range
          value={value2}
          onChange={setValue2 as any}
          style={{ width: '100%' }}
        />
      </Card>

      {/* 3. 带圆点标记的滑块 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          带刻度
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          显示刻度标记，只能拖拽到刻度上
        </div>
        <Slider
          value={value3}
          onChange={handleSliderChange3}
          dots
          step={10}
          marks={{
            0: '',
            10: '',
            20: '',
            30: '',
            40: '',
            50: '',
            60: '',
            70: '',
            80: '',
            90: '',
            100: '',
          }}
          style={{ width: '100%' }}
        />
      </Card>

      {/* 4. 带标签的滑块 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          带标签
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          显示自定义标签，step 为 null 时只能选择标签位置
        </div>
        <Slider
          marks={marks}
          step={null}
          value={value4}
          onChange={handleSliderChange4}
          style={{ width: '100%', marginBottom: 20 }}
        />
      </Card>

      {/* 5. 带输入框和按钮的滑块 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          带输入框和操作按钮
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          结合输入框和按钮使用
        </div>
        <Slider
          value={value5}
          onChange={handleSliderChange5}
          style={{ width: '100%', marginBottom: 16 }}
        />
        <Row gutter={8} align="middle">
          <Col>
            <InputNumber
              min={0}
              max={100}
              value={value5}
              onChange={handleInputChange}
              style={{ width: 80 }}
            />
          </Col>
          <Col>
            <Button type="default" size="small" onClick={handleForceInput}>
              强制入
            </Button>
          </Col>
          <Col>
            <Button type="default" size="small" onClick={handleUnit}>
              个单位
            </Button>
          </Col>
        </Row>
      </Card>

      {/* 6. 禁用状态 */}
      <Card size="small">
        <Title level={5} style={{ marginTop: 0 }}>
          禁用状态
        </Title>
        <div style={{ fontSize: 12, color: '#999', marginBottom: 16 }}>
          禁用状态下无法操作
        </div>
        <Slider defaultValue={30} disabled style={{ width: '100%', marginBottom: 16 }} />
        <Slider range defaultValue={[20, 50]} disabled style={{ width: '100%' }} />
      </Card>
    </Space>
  );
};

export default App;

